import React, { Component } from 'react'
import './index.css'
// 因为我们的数据很多时候是需要一个唯一标识的，我们这里借助nanoid这个库帮我们生成独一无二的标识
import { nanoid } from 'nanoid'
// 要对于propTypes进行限制，所以要npm install prop-types
import PropTypes from 'prop-types'

export default class Header extends Component {

    // 还记得吗，你要放在类身上的这个propTypes，第一个p是小写的。
    static propTypes = {
        addTodo:PropTypes.func.isRequired
    }

    handleKeyUp = (event)=>{
        console.log(1);
        if(event.keyCode!=13){
            return 
        }
        if(event.target.value==''){
            return 
        }
        
        // nanoid的使用也很简单，直接nanoid()就会返回一个唯一标识
        let todo = {id:nanoid(),name:event.target.value,done:false}

        // 这种调用，方法里的内容依然会在App里执行。
        this.props.addTodo(todo)
    }
    render() {
        return (
            <div className="header">
                <input type="text" placeholder='请输入内容...' onKeyUp={this.handleKeyUp}/>
            </div>
        )
    }
}
